<template>
    <view class="order">
      <view class="top3" v-if="detail.delivery_status === 30 || detail.delivery_status === 20" >
				<view class="Group"></view>
				{{delivery[detail.delivery_status ]}}
      </view>
      <view class="top2"  v-if="detail.delivery_status === 10 || detail.delivery_status === 50">
				<view class="Group2"></view>
				{{delivery[detail.delivery_status ]}}，请耐心等待系统通知
      </view>
			<view class="to5" v-if="detail.delivery_status === 40 || detail.delivery_status === 60">
				<view class="Group1"></view>
				{{detail.delivery_status === 40 ? detail.result_message :'订单状态异常情联系客服'}}
			</view>
      <view class="box-item">
				<view class="item" >
					<view class="item-top">
							 <view class="top-left">
									 <view class="left-text">
											 订单号:
									 </view>
									 <view class="left-ddh">
											 {{detail.order_no}}  <image src="@/static/order/fhzi.png" class="fhzi" @click="handleCopy(detail.order_no)"></image>
									 </view>
							 </view>
							 <view class="top-right">{{delivery[detail.delivery_status ]}}</view>
					</view>
					<view class="item-img">
							 <view class="img-left">
									 
							 </view>
							 <view class="img-right">
									 <view class="img-text">
											{{detail.goods_name}}
									 </view>
									 <view class="img-mun">
											 x1
									 </view>
							 </view>
					</view>
					<view class="jg">
						<view class="jg-left widd">
								 <view class="jg-item">
										 提交面值: 
								 </view>
								 <view class="item-ts">
										 {{detail.order_price}}
								 </view>
						</view>
						<view class="jg-left widd">
								 <view class="jg-item">
										 实际面值: 
								 </view>
								 <view class="item-ts">
										 {{detail.total_price}}
								 </view>
						</view>
					</view>
					<view class="jg">
						 <view class="jg-left widd">
								 <view class="jg-item">
										 回收价格: 
								 </view>
								 <view class="item-ts">
										 {{detail.recycle_discount}}
								 </view>
							</view>
						 <view class="jg-left">
								 <view class="jg-item  jg-item1">
										 结算金额: 
								 </view>
								 <view class="item-ts jg-item1">
										{{detail.recycle_price}}
								 </view>
						 </view>
					</view>
					<view class="sc">
							 <view class="jg-item">
										订单生成时间: 
							 </view>
							 <view class="item-ts">
								{{detail.create_time}}
							 </view>
					</view>
					<view class="sc" v-if="detail.delivery_status === 20">
							 <view class="jg-item">
										订单结算时间: 
							 </view>
							 <view class="item-ts">
								{{detail.result_date}}
							 </view>
					</view>
				</view>
      </view>
        <!-- 其他 -->
        <view class="other">
          <view class="other-item">
              其他
          </view>
					<view class="item"  v-if="detail.form_num === 1 || detail.form_num === 2">
							<view class="item-left">
									卡号: {{detail.card}}
							</view>
							<div class="item-right" @click="handleCopy(detail.card)">
									 <image src="@/static/order/fhzi.png" class="fhzi"></image>
							</div>
					</view>
					<view class="item" v-if="detail.form_num === 1 || detail.form_num === 3">
							<view class="item-left">
								卡密: {{detail.card_pass}}
							</view>
							<div class="item-right" @click="handleCopy(detail.card_pass)">
									 <image src="@/static/order/fhzi.png" class="fhzi"></image>
							</div>
					</view>
					<view class="item" v-if="detail.form_num === 4 || detail.form_num === 6">
							<view class="item-left">
								图片或二维码
							</view>
							<image :src="detail.order_image.file_path" style="" class="detail-imns"  mode="aspectFit"></image>
					</view>
					<view class="item" v-if="detail.form_num === 5">
							<view class="item-left">
								文本: {{detail.content}}
							</view>
							<div class="item-right" @click="handleCopy(detail.content)">
									 <image src="@/static/order/fhzi.png" class="fhzi"></image>
							</div>
					</view>
        </view>
    </view>
</template>

<script>
	import * as orderApi from '@/api/order'
	export default {
		data() {
			return {
				detail: {},
				delivery: {
					'10': '处理中',
					"20": "待结算",
					"30": "成功",
					"40": "失败",
					"50":"待处理",
					"60":"异常订单"
				},
			};
		},
		onLoad(options) {
			if(options.orderId){
				if(options.orderId.indexOf('?code')){
					options.orderId = options.orderId.split('?code')[0]
				}
				this.detailList(options.orderId)
			}else{
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
				
			
		},
		methods: {
			recurOrder(item){
				uni.navigateTo({
					url:"/pages/search/index?search="+ item.goods_name
				})
			},
			detailList(orderid){
				let _this = this;
				let token = uni.getStorageSync("AccessToken")
				orderApi.orderList({
					wxapp_id: _this.$wxapp_id,
					token:token,
					type:1,
					page:1,
					name:orderid
				}).then(res => {
					if(res.code === 1){
						this.detail = res.data.data[0]
						if(!this.detail){
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					}else{
						uni.switchTab({
							url:"/pages/index/index"
						})
					}      
				})
			},
			handleCopy(data) {
				uni.setClipboardData({
					data,
					success: () => {
						this.$toast('复制成功')
					}
				})
			}
		}
	}
</script>
<style lang="scss">
    .fhzi{
        margin-left: 5rpx;
        width: 20rpx;
        height: 24rpx;
    }
    .Group{
        display: inline-block;
        position: relative;
        margin-right: 10rpx;
        top: 5rpx;
        width: 32rpx;
        height: 32rpx;
        background: url('../../static/Group.png') no-repeat;
        background-size: 32rpx 32rpx;
    }
    .Group1{
        display: inline-block;
        position: relative;
        margin-right: 10rpx;
        top: 5rpx;
        width: 32rpx;
        height: 32rpx;
        background: url('../../static/Group1.png') no-repeat;
        background-size: 32rpx 32rpx;
    }
    .Group2{
         display: inline-block;
        position: relative;
        margin-right: 10rpx;
        top: 13rpx;
        width: 32rpx;
        height: 32rpx;
         transform:scale(1.5);
         background: url('../../static/Group2.png') no-repeat;
         background-size: 32rpx 32rpx;
    }
    .top3{
        padding-left: 20rpx;
        height: 78rpx;
        background: #3FD73C;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 78rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    .top2{
        padding-left: 20rpx;
        height: 78rpx;
        background: #9C8446;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 78rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    .to5{
        padding-left: 20rpx;
        height: 78rpx;
        background: #FA2E21;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 78rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    .box-item{
        margin:0 32rpx;
        background: #FCFDFD;
        box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border: 4rpx solid #FFFFFF;
        padding: 32rpx;
        .item{
            .item-top{
                margin-bottom: 10rpx;
                display: flex;
                justify-content: space-between;
                .top-left{
                    display: flex;
                    .left-text{
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #737373;
                        line-height: 33rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }
                    .left-ddh{
                        margin-left: 5rpx;
                        font-family: SF UI Display, SF UI Display;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #333333;
                        line-height: 33rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }
                }
                .top-right{
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #9C8446;
                    line-height: 33rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }
            .item-img{
                display: flex;
                padding-bottom: 20rpx;
                border-bottom: 1rpx solid #EEEEEE;
                .img-left{
                       margin-right: 10rpx;
                    width: 108rpx;
                    height: 108rpx;
                    background: #F2F7FA;
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                }
                .img-right{
                   .img-text{
                       margin-top: 10rpx;
                       font-family: PingFang SC, PingFang SC;
                       font-weight: 600;
                       font-size: 28rpx;
                       color: #333333;
                       line-height: 44rpx;
                       text-align: left;
                       font-style: normal;
                       text-transform: none;
                   } 
                   .img-mun{
                       font-family: PingFang SC, PingFang SC;
                       font-weight: 500;
                       font-size: 24rpx;
                       color: #737373;
                       line-height: 44rpx;
                       text-align: left;
                       font-style: normal;
                       text-transform: none;
                   }
                }
            }
       .jg{
             margin-top: 20rpx;
           display: flex;
					 justify-content: space-between;
					 align-items: center;
           .widd{
               // width: 400rpx;
           }
           .jg-left{
               display: flex;
               .jg-item{
                   height: 44rpx;
                   font-family: PingFang SC, PingFang SC;
                   font-weight: 400;
                   font-size: 26rpx;
                   color: #737373;
                   line-height: 44rpx;
                   text-align: left;
                   font-style: normal;
                   text-transform: none;
               }
               .item-ts{
                   font-family: PingFang SC, PingFang SC;
                   font-weight: 400;
                   font-size: 26rpx;
                   color: #333333;
                   line-height: 44rpx;
                   text-align: left;
                   font-style: normal;
                   text-transform: none;
               }
               .item-ts1,
               .jg-item1{
                   color: red;
               }
           }
       }
       .sc{
           margin-top: 20rpx;
           padding-top: 20rpx;
           border-top: 1rpx solid #EEEEEE;
           display: flex;
           .jg-item{
               height: 44rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 26rpx;
               color: #737373;
               line-height: 44rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
           .item-ts{
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 26rpx;
               color: #333333;
               line-height: 44rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
       }
        }
    }
    .other{
       margin:0 32rpx;
        margin-top: 20rpx;
       background: #FCFDFD;
       box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
       border-radius: 0rpx 0rpx 0rpx 0rpx;
       border: 4rpx solid #FFFFFF;
       padding: 32rpx; 
       .other-item{
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 24rpx;
           color: #B3B3B3;
           line-height: 28rpx;
           text-align: left;
           font-style: normal;
           text-transform: none;
            margin-bottom:20rpx;
       }
       .item{
           display: flex;
           justify-content: space-between;
					 align-items: center;
           .item-left{
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 28rpx;
               color: #333333;
               line-height: 56rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
            .item-right{
                display: flex;
                align-items: center;
            }
       }
    }
		.detail-imns{
			width: 200rpx;
			height: 200rpx;
		}
</style>